import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue' // 导入组件的第1种方式
// import AboutView from '../views/AboutView.vue'
import Login from '../components/Login.vue'
import HomePage from '../components/HomePage.vue'
import Welcome from '../components/Welcome.vue'
import Users from '../components/users/Users.vue'
import Roles from '../components/powers/Roles.vue'
import Rights from '../components/powers/Rights.vue'
import TreeData from '../components/powers/TreeData.vue'
import RightTree from '../components/powers/RightTree.vue'
import Cate from '../components/goods/Cate.vue'
import Params from '../components/goods/Params.vue'
import ParamsV2 from '../components/goods/ParamsV2.vue'
import List from '../components/goods/List.vue'
import AddGood from '../components/goods/Add.vue'
import Order from '../components/orders/Order.vue'
import Report from '../components/reports/Report.vue'

Vue.use(VueRouter)

const routes = [
  // {
  //   path: '/',
  //   name: 'home',
  //   component: HomeView
  // },

  // 访问空白根路径时直接重定向到/login,下面路由导航守卫,已经判定，如果是空路径，根据有无token路由到/home或/login，这个可以直接注释
  // {
  //   path: '/',
  //   redirect: '/login'
  // },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') // 导入组件的第2种方式
    // component: AboutView
  },
  {
    path: '/homePage',
    component: HomePage,
    redirect: '/welcome',
    children: [
      {
        path: '/welcome',
        component: Welcome,
      },
      {
        path: '/users',
        component: Users,
      },
      {
        path: '/roles',
        component: Roles,
      },
      {
        path: '/rights',
        component: Rights,
      },
      {
        path: '/treeData',
        component: TreeData,
      },
      {
        path: '/rightTree',
        component: RightTree,
      },
      {
        path: '/categories',
        component: Cate,
      },
      {
        path: '/params',
        component: Params,
      },
      {
        path: '/paramsV2',
        component: ParamsV2,
      },
      {
        path: '/goods',
        component: List,
      },
      {
        path: '/orders',
        component: Order,
      },
      {
        path: '/goods/add',
        component: AddGood,
      },
      {
        path: '/reports',
        component: Report,
      },
    ]
  },
  {
    path: '/login',
    component: Login
  }
]

const pathArr = ['/homePage','/welcome','/users','/roles','/rights','/categories','/params','/goods','/goods/add','/login']

const router = new VueRouter({
  routes
})

// 路由导航守卫 这个http://localhost:4000/# 路径似乎不会触发这个方法
router.beforeEach((to, from, next) => {
  console.log('路由导航守卫执行')
  const tokenStr = window.sessionStorage.getItem('token');
  let toPath = to.path;
  console.log('toPath is ' + toPath) 

  // if(! pathArr.includes(toPath)){
  //  const newPath = toPath.substring(toPath.lastIndexOf('/'))
  //  toPath = newPath
  //  console.log('newPath is ' + newPath) 
  // }
  // console.log('2 toPath is ' + toPath) 

  const nextPath = next.path;
  console.log('nextPath is ' + nextPath) 
  // 空路径根据有无token路由到/homePage 或 /login
  if( toPath === '/') {
    if (tokenStr) return  next('/homePage');
    return next('/login');
  }
  if (toPath === '/login') return next();
  if (!tokenStr) return next('/login');
  next();
})

export default router
